import { defineComponent, onMounted, PropType, ref } from "vue";
import * as echarts from "echarts/core";
import { GridComponentOption } from "echarts/components";
import { LineSeriesOption } from "echarts/charts";

type EChartsOption = echarts.ComposeOption<GridComponentOption | LineSeriesOption>;

export default defineComponent({
	name: "Chart",
	props: {
		option: Object as PropType<EChartsOption>
	},
	setup(props) {
		const echartDom = ref();

		onMounted(() => {
			setTimeout(() => {
				let myChart = echarts.init(echartDom.value);
				props.option && myChart.setOption(props.option);
				window.onresize = () => myChart.resize();
			}, 500);
		});

		return () => <div ref={echartDom} className={"w-full h-full"}></div>;
	}
});
